<template>
  <div>
    <el-dialog
      title="评审"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="1000px"
      @closed="resetForm('form')"
    >
      <div>
        <p class="score-title" v-show="tableData.length">
          <span class="el-icon-edit-outline"></span> 请打分：
        </p>
        <div class="score" v-show="tableData.length">
          <ul>
            <li v-for="v in tableData" :key="v.id">
              <h4 class="score-title-in"
                ><span class="el-icon-discover"></span> {{ v.content }}</h4
              >
              <div class="score-item" v-for="m in v.childList" :key="m.id">
                <p class="score-label">{{ m.content }}：</p>
                <span class="score-des">
                  {{ m.minScore }} ~ {{ m.maxScore }} 分
                </span>
                <el-input-number
                  v-model="form.expertsTaskItemList[formIdx(m.id)].score"
                  :min="parseInt(m.minScore)"
                  :max="parseInt(m.maxScore)"
                  controls-position="right"
                  label="请打分"
                  class="score-input"
                  size="mini"
                ></el-input-number>
              </div>
            </li>
          </ul>
        </div>
        <div class="score-wrap">
          <el-form ref="form" :rules="rules" :model="form" label-width="100px">
            <el-form-item label="审批状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio label="1">建议通过</el-radio>
                <el-radio label="2">建议修改后通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="评审意见" prop="content">
              <UEditor ref="ueditor" :defaultMsg="form.content" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="custom" v-preventReClick @click="submitForm('form')"
          >提 交</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { expertsScoreItemQuery } from '@/api/admin/audit/expertsScoreItem.js'
import {
  expertsTaskItemAdd,
  expertsTaskItemUpdate,
} from '@/api/admin/audit/expertsTaskItem.js'
import Bus from '@/utils/bus.js'
export default {
  data() {
    return {
      dialogVisible: false,
      addOrEdit: 1,
      checkedData: {},
      form: {
        taskId: '', //专家任务ID
        content: '', //审批意见
        status: '1', //审批状态，1-建议通过，2-建议修改后通过
        expertsTaskItemList: [],
      },
      rules: {
        status: [
          { required: true, message: '请输入审批状态', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '请输入审批意见', trigger: 'blur' },
        ],
      },
      listQuery: {
        page: 1,
        limit: 10,
        scope: '', //校区部门id
        type: 1, //课程类型
        extFiled: '', //活动id
      },
      tableData: [],
    }
  },
  computed: {
    formIdx() {
      return function (v) {
        let item = this.form.expertsTaskItemList.filter(
          (m) => m.scoreId == v,
        )[0]
        let idx = this.form.expertsTaskItemList.indexOf(item)
        return idx
      }
    },
  },
  //评审活动：extFiled
  //审核推送：scope
  mounted() {
    Bus.$on('showDialogReview', (v, type) => {
      this.checkedData = JSON.parse(JSON.stringify(v))
      this.form.taskId = v.id
      this.listQuery.type = this.checkedData.courseType
      //reviewFlag: true - 评审活动  false - 审核推送
      let reviewFlag = this.checkedData.hasOwnProperty('expertsReview')
      if (reviewFlag) {
        this.listQuery.extFiled = v.reviewId || ''
        this.listQuery.scope = ''
      } else {
        this.listQuery.extFiled = ''
        let { deptFullData } = this.$store.getters
        if (
          deptFullData.hasOwnProperty('childList') &&
          deptFullData.childList.length
        ) {
          this.listQuery.scope = deptFullData.childList[0].id
        }
      }
      this.getScoreList()
      this.addOrEdit = type == 'add' ? 1 : 2
      if (this.addOrEdit == 2) {
        this.$set(this.form, 'id', v.id)
        this.form.status = v.resStatus || '1'
        this.form.content = v.content
      } else {
        this.$delete(this.form, 'id')
      }
      // this.dialogVisible = true
    })
  },
  beforeDestroy() {
    Bus.$off('showDialogReview')
  },
  methods: {
    getScoreList() {
      expertsScoreItemQuery(this.listQuery).then((res) => {
        this.tableData = res.data.data
        this.form.expertsTaskItemList = []
        this.tableData.forEach((v) => {
          v.childList.forEach((item) => {
            let obj = {
              scoreId: item.id,
              scoreContent: item.content,
              score: '',
            }
            this.form.expertsTaskItemList.push(obj)
            this.checkedData.expertsTaskItemList.forEach((v, i) => {
              let { scoreContent, score } = v
              this.form.expertsTaskItemList.forEach((m) => {
                if (m.scoreContent == scoreContent) {
                  m.score = score
                }
              })
            })
          })
        })
        this.dialogVisible = true
      })
    },
    submitForm(form) {
      this.form.content = this.$refs.ueditor.message
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.addOrEdit == 1 ? this.add() : this.edit()
        }
      })
    },
    //新增
    add() {
      expertsTaskItemAdd(this.form).then((res) => {
        this.dialogVisible = false
        Bus.$emit('flowRunTaskList')
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    //修改
    edit() {
      expertsTaskItemUpdate(this.form).then((res) => {
        this.dialogVisible = false
        Bus.$emit('flowRunTaskList')
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    //重置表单
    resetForm(form) {
      this.$refs[form].resetFields()
      this.form.taskId = ''
      this.form.content = ''
      this.form.status = '1'
    },
  },
}
</script>
<style scoped lang="scss">
.score-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--colorH1);
  margin-bottom: 10px;
}
.score {
  padding: 20px;
  background: #f7f7f7;
  .score-title-in {
    font-size: 15px;
    color: #333;
    border-bottom: 1px dashed #d5d5d5;
    margin-bottom: 10px;
    span {
      font-size: 16px;
      color: var(--colorH1);
    }
  }
  .score-item {
    padding: 0 10px;
    &:nth-child(odd) {
      background: #f1f1f1;
    }
  }
  .score-label {
    max-width: 70%;
    display: inline-block;
  }
  .score-input {
    float: right;
    margin: 6px 10px;
  }
  .score-des {
    float: right;
    color: var(--colorH1);
    margin-left: 10px;
    width: 70px;
  }
}
.score ul li {
  line-height: 40px;
  margin-bottom: 10px;
}
.score-wrap {
  margin-top: 20px;
  padding: 20px;
  padding-bottom: 5px;
  background: #f7f7f7;
}
</style>